<template>
	<el-dialog v-model="dialogVisible" title="确认资料提交环节" :before-close="handleClose" width="90%" align-center>
		<el-row>
			<el-col v-if="options.length > 0">
				<el-select v-model="stepId" clearable placeholder="请选择确认的环节">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-col>
			<el-col v-else>
				<div>所有状态均已提交，无需操作</div>
			</el-col>
		</el-row>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="updateStatus"> 提交 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="ChangeStatus">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getSatesSelect, updateProcessStatus } from '@/api/project/states'
import { useRouter } from 'vue-router'

interface Option {
	label: string
	value: number
}

const router = useRouter()
const dialogVisible = ref(false)
const stepId = ref(null)
const options = ref<Option[]>([])

interface Props {
	projectId: number | undefined
}

const props = defineProps<Props>()

const open = async () => {
	dialogVisible.value = true
	if (props.projectId) {
		getSatesSelect(props.projectId).then(res => {
			// @ts-ignore
			if (res.code === 0) {
				options.value = res.data
			}
		})
	}
}

const updateStatus = async () => {
	if (options.value.length === 0) {
		dialogVisible.value = false
		return
	}
	if (stepId.value == undefined) {
		ElMessage.error({
			message: '请选择节点',
			duration: 500
		})
		return
	}
	if (props.projectId) {
		updateProcessStatus(props.projectId, stepId.value).then(res => {
			//@ts-ignore
			if (res.code === 0) {
				ElMessage.success({ message: '提交成功', duration: 500 })
				options.value = []
				stepId.value = null
				dialogVisible.value = false
				router.replace('/search/result')
			} else {
				// @ts-ignore
				ElMessage.error({ message: res.message, duration: 500 })
			}
		})
	}
}

const handleClose = (done: () => void) => {
	ElMessageBox.confirm('确认放弃修改吗?').then(() => {
		done()
	})
}

defineExpose({ open })
</script>

<style scoped></style>
